<template>
	<view class="">
		<view style="height: 88rpx;"></view>
		<view class="top dis_f_l_c">
			<view class="black_f_40 font_w_bold">消息</view>
			<view class="dis_f_l_c mar_l_24">
				<image class="t_img" src="../../static/image/shaochu.png" mode=""></image>
				<view class="grey_f_28" @click="del">
					清除未读
				</view>
			</view>
		</view>
		<div class="tui-conversation" @click="handleClickConv" @touchstart="handleTouchStart"
			@touchend="handleTouchEnd">
			<ConversationNetwork />
			<ConversationList ref="conversationListDomRef" class="tui-conversation-list"
				@handleSwitchConversation="handleSwitchConversation" @getPassingRef="getPassingRef" />
			<view class="tabbar">
				<navigator url="/pages/index/index" class="tab_item o" open-type="switchTab">订单</navigator>
				<view class="tab_item t" @click="swi(2)">
					消息
				</view>
				<navigator url="/pages/mine/mine" class="tab_item o" open-type="switchTab">我的</navigator>
			</view>
		</div>
	</view>
</template>

<script lang="ts" setup>
	// import TUIChatEngine, {
	//   TUITranslateService,
	//   TUIConversationService,
	//   TUIStore,
	//   StoreName,
	//   IMessageModel,
	//   IConversationModel,
	// } from '@tencentcloud/chat-uikit-engine';
	import { TUIStore, StoreName,TUIConversationService } from '@tencentcloud/chat-uikit-engine';
	import { TUIGlobal } from '@tencentcloud/universal-api';
	import { ref } from '../../adapter-vue';
	import TUISearch from '../TUISearch/index.vue';
	import ConversationList from './conversation-list/index.vue';
	import ConversationHeader from './conversation-header/index.vue';
	import ConversationNetwork from './conversation-network/index.vue';
	import { onHide } from '@dcloudio/uni-app';

	const emits = defineEmits(['handleSwitchConversation']);

	const totalUnreadCount = ref(0);
	const headerRef = ref<typeof ConversationHeader>();
	const conversationListDomRef = ref<typeof ConversationList>();
	const touchX = ref<number>(0);
	const touchY = ref<number>(0);
	const isShowConversationHeader = ref<boolean>(true);

	TUIStore.watch(StoreName.CONV, {
		totalUnreadCount: (count : number) => {
			totalUnreadCount.value = count;
		},
	});

	TUIStore.watch(StoreName.CUSTOM, {
		isShowConversationHeader: (showStatus : boolean) => {
			isShowConversationHeader.value = showStatus !== false;
		},
	});

	const handleSwitchConversation = (conversationID : string) => {
		TUIGlobal?.navigateTo({
			url: '/TUIKit/components/TUIChat/index',
		});
		emits('handleSwitchConversation', conversationID);
	};

	const closeChildren = () => {
		headerRef?.value?.closeChildren();
		conversationListDomRef?.value?.closeChildren();
	};

	const handleClickConv = () => {
		closeChildren();
	};

	onHide(closeChildren);

	const handleTouchStart = (e : any) => {
		touchX.value = e.changedTouches[0].clientX;
		touchY.value = e.changedTouches[0].clientY;
	};

	const handleTouchEnd = (e : any) => {
		const x = e.changedTouches[0].clientX;
		const y = e.changedTouches[0].clientY;
		let turn = '';
		if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
			turn = 'right';
		} else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
			turn = 'left';
		}
		if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
			turn = 'down';
		} else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
			turn = 'up';
		}
		if (turn === 'down' || turn === 'up') {
			closeChildren();
		}
	};

	const getPassingRef = (ref) => {
		ref.value = conversationListDomRef.value;
	};

	const del = () => {
		let usersig=uni.$chat_secretKey
		uni.request({
		    url: `https://console.tim.qq.com/v4/openim/admin_set_msg_read?sdkappid=1600008902&identifier=user1&usersig=${usersig}&random=99999999&contenttype=json`,
		  
		   
		    success: (res) => {
		        console.log(res.data);
		    }
		});

	};
</script>


<style lang="scss" scoped src="./style/index.scss">

</style>
<style lang="scss">
	.top {
		height: 88rpx;
		margin-left: 32rpx;
	
		.t_img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.tabbar {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.tab_item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 250rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.o {
			font-size: 20rpx;
			color: #CCCED1;
		}

		.t {
			font-size: 20rpx;
			color: #3377FF;
		}
	}
</style>